import React, { FC, ReactNode, memo, useEffect, useRef, useState } from 'react'
import {
  BarPlayerInfo,
  PlayerBarWrapper,
  BarControl,
  BarOperator
} from './style'
import { Link } from 'react-router-dom'
import { Slider } from 'antd'
import { shallowEqualApp, useAppSelector } from '@/store'
import { formatTime, getImageSize } from '@/utils/format'
import { getSongPlayUrl } from '@/utils/handle-player'
interface IProps {
  children?: ReactNode
}
const AppPlayerBar: FC<IProps> = () => {
  const [isPlaying, setIsPlaying] = useState(false)
  const [progress, setProgress] = useState(0)
  const [duration, setDuration] = useState(0)
  const [currentTime, setCurrentTime] = useState(0)
  const audioRef = useRef<HTMLAudioElement>(null)

  const { currentSong } = useAppSelector(
    (state) => state.player,
    shallowEqualApp
  )
  /**组件内的副作用和操作 */
  useEffect(() => {
    //1. 播放音乐
    audioRef.current!.src = getSongPlayUrl(currentSong?.id)
    // audioRef.current
    //   ?.play()
    //   .then(() => {
    //     console.log('播放成功')
    //   })
    //   .catch((err) => {
    //     setIsPlaying(false)
    //     console.log('播放失败', err)
    //   })

    //2. 获取音乐的总时长
    setDuration(currentSong.dt)
  }, [currentSong])

  /**音乐播放 */
  function handleTimeUpdate() {
    //1. 获取当前的播放时间
    const currentTime = audioRef.current!.currentTime * 1000

    //2.计算当前的歌曲进度
    const progress = (currentTime / duration) * 100
    setProgress(progress)
    setCurrentTime(currentTime)
  }

  /**组件内部的事件处理 */
  function handlePlayBtnClick() {
    //1.控制播放器的播放/暂停
    isPlaying
      ? audioRef.current?.pause()
      : audioRef.current?.play().catch(() => setIsPlaying(false))

    //2. 修改播放状态
    setIsPlaying(!isPlaying)
  }

  function handleSliderChanged(value: number) {
    const currentTime = (value / 100) * duration

    audioRef.current!.currentTime = currentTime / 1000

    setCurrentTime(currentTime)
    setProgress(value)
  }

  return (
    <PlayerBarWrapper className="sprite_playbar">
      <div className="content wrap-v2">
        <BarControl isPlaying={isPlaying}>
          <button className="btn sprite_playbar prev"></button>
          <button
            className="btn sprite_playbar play"
            onClick={handlePlayBtnClick}
          ></button>
          <button className="btn sprite_playbar next"></button>
        </BarControl>
        <BarPlayerInfo>
          <Link to="/play">
            <img
              className="image"
              src={getImageSize(currentSong?.al?.picUrl, 50)}
              alt=""
            />
          </Link>
          <div className="info">
            <div className="song">
              <span className="song-name">{currentSong.name}</span>
              <span className="singer-name">{currentSong.ar?.[0]?.name}</span>
            </div>
            <div className="progress">
              {/**Slider组件 */}
              <Slider
                step={0.5}
                value={progress}
                tooltip={{ formatter: null }}
                onChange={handleSliderChanged}
              />
              <div className="time">
                <span className="current">{formatTime(currentTime)}</span>
                <span className="divider">/</span>
                <span className="duration">{formatTime(duration)}</span>
              </div>
            </div>
          </div>
        </BarPlayerInfo>
        <BarOperator>
          <div className="left">
            <button className="btn pip"></button>
            <button className="btn sprite_playbar favor"></button>
            <button className="btn sprite_playbar share"></button>
          </div>
          <div className="right sprite_playbar">
            <div className="btn sprite_playbar volume"></div>
            <div className="btn sprite_playbar loop"></div>
            <div className="btn sprite_playbar playlist"></div>
          </div>
        </BarOperator>
      </div>
      <audio ref={audioRef} onTimeUpdate={handleTimeUpdate} />
    </PlayerBarWrapper>
  )
}
export default memo(AppPlayerBar)
